$(function () {
  // 切换注册和登录盒子互斥渲染
  $('#goto-register').on('click', function () {
    // 显示注册的盒子
    $('#register').stop().show()
  })
  $('#goto-login').on('click', function () {
    // 隐藏注册的盒子
    $('#register').stop().hide()
  })

  // 定义自己的表单校验规则 在html页面引入layuijs之后会在window上挂载layui,在layui中有form
  // console.log(window.layui.form)
  // const form = window.layui.form
  const { form } = layui
  form.verify({
    username: [/^[\a-z0-9A-Z]{6,12}$/, '账号名是6到10位由数字, 字母组成'],
    password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    repwd: function (value) {
      return value !== $('.pwd').val() && '两次输入的密码不一致'
    },
  })

  // 注册账号 为注册的表单绑定submit事件, 表单默认行为 刷新页面
  $('#register .layui-form').on('submit', async function (e) {
    e.preventDefault() // 阻止表单默认行为
    // 1. 获取用户名和密码
    const obj = {
      username: $('#register input[name=username]').val(),
      password: $('#register input[name=password]').val(),
    }
    // 通过遍历获取数据
    // const arr = []
    // for (k in obj) {
    //   arr.push(`${k}=${obj[k]}`)
    // }
    // 发送请求符合格式的数据
    // const str = arr.join('&')

    // 2. 发送请求 axios 发送请求
    // Promise  可以使用async和await
    const res = await axios({
      method: 'post',
      url: 'http://api-breakingnews-web.itheima.net/api/reguser',
      // post请求携带参数使用data get请求携带参数params
      // data: str,
      data: handleDataFormat(obj),
    })
    // console.log(res)
    // 解构赋值，拿到status和message的值
    const {
      data: { status, message },
    } = res
    // status = 0 表示成功  message
    if (status === 0) {
      layer.msg(message)
      // 注册成功隐藏页面
      $('#register').stop().hide()
    }

    // 调用抽离注册的api
    // const res = await reqPostRegister(obj)
    // $('#register').stop().hide()
  })

  // 登录账号 为注册的表单绑定submit事件, 表单默认行为 刷新页面
  $('#login .layui-form').on('submit', async function (e) {
    // 阻止表单默认行为
    e.preventDefault()
    // 1. 获取用户名和密码
    const obj = {
      username: $('#login input[name=username]').val(),
      password: $('#login input[name=password]').val(),
    }
    // 通过遍历获取数据
    // const arr = []
    // for (k in obj) {
    //   arr.push(`${k}=${obj[k]}`)
    // }
    // 发送请求符合格式的数据
    // const str = arr.join('&')

    // 2. 发送请求 axios 发送请求
    // Promise  可以使用async和await
    const res = await axios({
      method: 'post',
      url: 'http://api-breakingnews-web.itheima.net/api/login',
      // data: str,
      data: handleDataFormat(obj),
    })
    // console.log(res)
    const {
      data: { status, message },
    } = res
    // status = 0 表示成功  message
    if (status === 0) {
      layer.msg(message)
      // 将token存储在本地, 下次调用别的接口用token
      localStorage.setItem('big-event-token', res.data.token)
      // 跳转到index页面
      location.href = './index.html'
    }

    // 调用抽离登录的api
    // const res = await reqPostLogin(obj)
    // 将token存储在本地, 下次调用别的接口用token
    // localStorage.setItem('big-event-token', res.data.token)
    // location.href = './index.html'
  })
})
